<template>
  <div class="home">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用订单管理系统</span>
        </div>
      </template>
      <div class="stats-grid">
        <el-statistic
          title="总订单数"
          :value="orderStats.total"
          suffix="单"
        />
        <el-statistic
          title="待处理"
          :value="orderStats.pending"
          suffix="单"
        />
        <el-statistic
          title="今日订单"
          :value="orderStats.today"
          suffix="单"
        />
      </div>
      <div class="actions">
        <el-button type="primary" @click="goToOrderList">
          <el-icon><List /></el-icon>
          查看订单列表
        </el-button>
        <el-button type="success" @click="goToCreateOrder">
          <el-icon><Plus /></el-icon>
          创建新订单
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { List, Plus } from '@element-plus/icons-vue'

const router = useRouter()

const orderStats = ref({
  total: 2567,
  pending: 89,
  today: 45
})

const goToOrderList = () => {
  router.push('/orders')
}

const goToCreateOrder = () => {
  router.push('/orders/create')
}
</script>

<style scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
}

.welcome-card {
  text-align: center;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
}

.actions {
  margin-top: 30px;
}

.actions .el-button {
  margin: 0 10px;
}
</style>